
<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue';

let showText: Ref<boolean> = ref(true)
let showCircle: Ref<boolean> = ref(true)
let show: Ref<boolean> = ref(true)

onMounted(() => {
    setTimeout(() => {
        showText.value = false
    }, 2600)
    setTimeout(() => {
        showCircle.value = false
    }, 3000)
    setTimeout(() => {
        show.value = false
    }, 5000)
})
</script>

<template>
    <div v-if="show" class="container">
        <div class="text-content" :class="showText ? '' : 'text-content-active'">
            <span class="text" v-if="showCircle" :class="showText ? '' : 'text-active'">Hellow World!</span>
        </div>
        <div v-if="!showText" class="circle" :class="showCircle ? '' : 'circle-active'"></div>
    </div>
</template>

<style scoped>
.container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* 文字 */
.text-content{
    position: absolute;
    top: -50vh;
    right: -50vw;
    bottom: -50vh;
    left: -50vw;
    font-size: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #ef9a94;
    z-index: 1;
    cursor: default;
}
.text-content-active{
    background-color: transparent;
}
.text{
    z-index: 10;
    transform: scale(4) translateX(-6.6rem) translateY(-0.5rem);
    animation: move 3s linear;
}
@keyframes move {
    0%{
        transform: scale(1);
    }
    70%{
        transform: scale(1) translateX(-6.6rem) translateY(-0.5rem);
    }
    100%{
        transform: scale(4) translateX(-6.6rem) translateY(-0.5rem);
    }
}

/* 圆圈 */
.circle{
    position: absolute;
    background: transparent;
    box-sizing: content-box;
    box-shadow: 0 0 0 100rem #ef9a94;
    transition: all 1s linear;
    border-radius: 50%;
    animation: border 1s linear;
    height: 1px;
    width: 1px;
    border: solid 20rem white;
}
.circle-active{
    border: solid 40vw white;
    height: 150vw;
    width: 150vw;
}
@keyframes border {
    0%{
        border: solid 0rem white;
    }
    100%{
        border: solid 20rem white;
    }
}
</style>
